@layer components {
    button,
    input[type='button'],
    input[type='submit'],
    input[type='reset'],
    [is-~='button'] {
        --button-primary: var(--foreground0);
        --button-secondary: var(--background0);
        --mapped-primary: var(--button-primary);
        --mapped-secondary: var(--button-secondary);

        color: var(--mapped-secondary);
        background-color: var(--mapped-primary);
        font-family: var(--font-family);
        font-size: var(--font-size);
        line-height: var(--line-height);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        padding: 0 2ch;
        outline: none;

        &[box-] {
            color: var(--mapped-primary);
            background-color: transparent;
            --box-border-color: var(--mapped-primary);
        }

        &:focus {
            font-weight: bold;
            text-decoration: underline;
        }

        &:active {
            --mapped-primary: var(--mapped-secondary);
            --mapped-secondary: var(--mapped-primary);
        }

        &:disabled {
            text-decoration: line-through;
            pointer-events: none;
        }

        &[size-='small'] {
            padding: 0 1ch;
            height: 1lh;
        }

        &:not([size-]):not([box-]),
        &[size-='default']:not([box-]) {
            background-color: transparent;
            background-image: linear-gradient(
                to bottom,
                transparent 0,
                transparent 0.5lh,
                var(--mapped-primary) 0.5lh,
                var(--mapped-primary) calc(100% - 0.5lh),
                transparent calc(100% - 0.5lh),
                transparent
            );
        }

        &[size-='large'],
        &[size-='default'],
        &:not([size-]) {
            height: 3lh;
        }

        &[variant-='foreground0'],
        &:not([variant-]) {
            --button-primary: var(--foreground0);
            --button-secondary: var(--background0);
        }

        &[variant-='foreground1'] {
            --button-primary: var(--foreground1);
            --button-secondary: var(--background0);
        }

        &[variant-='foreground2'] {
            --button-primary: var(--foreground2);
            --button-secondary: var(--background0);
        }

        &[variant-='background0'] {
            --button-primary: var(--background0);
            --button-secondary: var(--foreground0);
        }

        &[variant-='background1'] {
            --button-primary: var(--background1);
            --button-secondary: var(--foreground0);
        }

        &[variant-='background2'] {
            --button-primary: var(--background2);
            --button-secondary: var(--foreground0);
        }

        &[variant-='background3'] {
            --button-primary: var(--background3);
            --button-secondary: var(--foreground0);
        }
    }
}
